.ChatList-btns-wrapper {
  color: #9e9e9e;
  font-size: 18px;
  height: 44px;
  position: relative;
  transition: height 0.3s cubic-bezier(0.18, 0.89, 0.68, 1.04);
  box-shadow: none !important;
  .ChatList-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s;
    z-index: 1;
    .icon-initiate_chat,
    .icon-chat_retract,
    .icon-chat_open {
      font-size: 20px;
    }
    .icon-initiate_chat {
      font-size: 21px;
    }
    &.visible {
      opacity: 0;
      z-index: 0;
    }
    i:not(:hover) {
      color: rgba(158, 158, 158, 0.8) !important;
    }
  }
  .ChatList-row-btns {
    flex-direction: row;
  }
  .ChatList-column-btns {
    flex-direction: column;
    .search-btn {
      display: none;
    }
  }
  .ChatList-btn {
    width: 25%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    >i {
      transition: transform 0.3s;
      &:hover {
        transform: scale(1.2);
      }
    }
  }
  .sidebar-btn {
    display: flex !important;
  }
  &.visible {
    height: 125px;
    flex-direction: column;
    .ChatList-btn {
      width: 100%;
    }
    .addressBook-btn {
      margin-top: 5px;
    }
    .chat-btn {
      margin-bottom: 5px;
    }
    .sidebar-btn {
      height: 45px;
      i:not(:hover), i:hover {
        color: #fff !important;
      }
    }
    .dark {
      background-color: rgba(65, 84, 93, .5);
    }
  }
}

.ChatList-btn-Tooltip {
  width: 45px;
  text-align: center;
  .Tooltip-arrow {
    margin-left: 5px;
  }
}

.ChatList-btn-Tooltip-en {
  width: 65px;
  .Tooltip-arrow {
    margin-left: 15px;
  }
}
